/**
 * FixedContainer module
 */

import React from 'react';
import editorSize from '../../../../consts/editorSize';
import switchTypes from '../../../../consts/switchTypes';
import widgetTypes from '../../../../consts/widgetTypes';

const Widget = require('./Widget');

class FixedContainer extends React.Component {
    componentDidMount() {
        const { fromTemplate } = this.props;
        const scrollTop = editorSize.view.height / 2 - 700;
        const scrollLeft = editorSize.view.width / 2 - 700;
        const area = {
            width: parseFloat(editorSize.editor_width),
            height: parseFloat(editorSize.editor_height),
        };
        const editorPanel = $('.creator-editor');
        const top = scrollTop + editorPanel.height() / 2 - area.height / 2;
        const left = scrollLeft + editorPanel.width() / 2 - area.width / 2;

        const mainImgPosition = {
            left,
            top,
        };
        // set transform
        this.transform = {
            offset_x: mainImgPosition.left + area.width / 2,
            offset_y: mainImgPosition.top + area.height / 2,
        };
        if (!fromTemplate) {
            // 排序
            // root.handleOnSortable(this.elements.floating_container, 'y');
        }
    }

    render() {
        const switchType = this.props.switchType;
        const widgets = this.props.widgets;
        const root = this.props.root;
        return (
          <div className="floatingbtnCanvas">
            <div className={`ui-selectable editor-fixed ${switchType === switchTypes.THREED_AR ? '' : 'editor-canvas'}`} data-editor-canvas aria-disabled="false">
              <div className="floating_container">
                {
                    widgets.map((widget) => {
                        if (widget.type === widgetTypes.FIXEDBTN) {
                            return <Widget key={`${widget.id}-m`} transform={this.transform} root={root} widget={widget} parent={this} />;
                        }
                    })
                }
              </div>
            </div>
          </div>
        );
    }
}

export default FixedContainer;
